<template>
  <div class="box-header">
    <div :class="{'box-header-title':true,'left-bar':withSplit}">{{title}}</div>
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>

export default {
  name: 'boxheader',
  props:{
    title:{
      type:String,
      default:''
    },
      withSplit:{
      type:Boolean,
      default:true
    }
  }
 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box-header{
  display:flex;
  justify-content: space-between;
  line-height: 40px;
  padding: 5px 20px
}
.box-header-title{
  color: #fff;
}
.left-bar:before{
  content: '';
  display: inline-block;
  width: 2px;
  height: 20px;
  background:rgb(106,192,191);
  vertical-align: middle;
  margin-right: 20px;
}
</style>
